import { State } from '@/redux/interface'
import { useSelector } from 'react-redux'
import dark from './antTheme/dark'
import defaultTheme from './antTheme/default'
import darkCss from './css/dark.css?inline'
import defaultCss from './css/defualt.css?inline'
/**
 * @description 全局设置主题
 */
const useTheme = () => {
    const {theme} = useSelector((state:State) => state.global)

    // 设置全局样式主题
    let head = document.getElementsByTagName("head")[0];
    const getStyle = head.getElementsByTagName("style");
    if (getStyle.length > 0) {
        for (let i = 0, l = getStyle.length; i < l; i++) {
            if (getStyle[i]?.getAttribute("data-type") === "theme"){ 
                getStyle[i].remove();
            }
        }
    }
    let styleDom = document.createElement("style");
    styleDom.dataset.type = "theme";
    switch(theme) {
        case 'default':
            styleDom.innerHTML = defaultCss
            break;
        case 'dark':
            styleDom.innerHTML = darkCss
            break;
    }
    head.appendChild(styleDom);

    // 设置echarts主题

    // 设置地图主题

    // 设置 antd 主题
    switch(theme) {
        case 'default':
            return defaultTheme
        case 'dark':
            return dark
    }
}

export default useTheme